<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" th:href="@{css/base.css}" type="text/css">
<link rel="stylesheet" th:href="@{css/home.css}" type="text/css">
<link rel="stylesheet" th:href="@{plugins/bootstrap/css/bootstrap.min.css}" type="text/css">
</head>

<body unselectable="on" onselectstart="return false;" style="-moz-user-select: none;">
	<div class="container-fluid">
		<div class="row" style="margin-bottom: 10px">
			<div class="col-md-1"></div>
			<div class="col-md-2" sec:authorize="hasRole=('ROLE_ADMIN')"><button id="init" type="button" class="btn btn-primary">初始化</button></div>
			<div class="col-md-2"><button id="search" type="button" class="btn btn-primary">查询</button></div>
            <div class="col-md-2">
                <form action="logout" method="post">
                    <input type="submit" class="btn btn-primary" value="注销"/>
                </form>
            </div>

		</div>
		<div class="row" id="summary">
			<div class="col-md-1"></div>
			<div class="col-md-10">
				<div class="panel panel-default">
				    <div class="panel-body">
				    	<div class="col-md-3 borderright">
					     	<a class="item-a" th:href="@{redirect?pagename=blockinfo}">
						     	<div class="row">
						     		<div class="col-md-3">
						     	    	<span class="glyphicon glyphicon-book item-icon" aria-hidden="true"></span>
						     	    </div>
						     	    <div class="col-md-6">
										<span id="blockCount" class="item-num"></span>
									</div>
								</div>
								<span class="item-name">区块</span>
							</a>
						</div>
						<div class="col-md-3 borderright">
					     	<a class="item-a" th:href="@{redirect?pagename=transaction}">
					     		<div class="row">
						     		<div class="col-md-3">
						     	    	<span class="glyphicon glyphicon-list-alt item-icon" aria-hidden="true"></span>
						     	    </div>
						     	    <div class="col-md-6">
										<span id="transCount" class="item-num"></span>
									</div>
								</div>
								<span class="item-name">交易</span>
							</a>
						</div>
						<div class="col-md-3 borderright">
					     	<a class="item-a" th:href="@{redirect?pagename=peerinfo}">
					     		<div class="row">
						     		<div class="col-md-3">
						     	    	<span class="glyphicon glyphicon-grain item-icon" aria-hidden="true"></span>
						     	    </div>
						     	    <div class="col-md-6">
										<span id="peerCount" class="item-num"></span>
									</div>
								</div>
								<span class="item-name">节点</span>
							</a>
						</div>
						<div class="col-md-3">
					     	<a class="item-a">
					     	<div class="row">
						     		<div class="col-md-3">
						     	    	<span class="glyphicon glyphicon-transfer item-icon" aria-hidden="true"></span>
						     	    </div>
						     	    <div class="col-md-6">
										<span id="chaincodeCount" class="item-num"></span>
									</div>
								</div>
								<span class="item-name">链码</span>
							</a>
						</div>
				    </div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-1"></div>
			<div class="col-md-5">
				<div class="panel panel-default panel-top">
				<table id="peerhead" class="table" style="text-align:center;">
					<thead>
						<tr style="height:42px">
						    <th class="col-md-8">节点名</th>
						    <th class="col-md-4">状态</th>
 						</tr>
					</thead>
				</table>
				<div class="fixedhead" style="overflow:auto;">
				<table class="table table-hover" id="peer">
					<tbody id="tbody">
						<!--<tr v-for="peer in peerList" track-by="$index">-->
     						<!--<td class="col-md-8">{{peer.peerName}}</td>-->
    						<!--<td class="col-md-4"><span class="label label-success">{{peer.status}}</span></td>-->
   						<!--</tr>-->
					</tbody>
				</table>
				</div>
				</div>
			</div>
			<div class="col-md-5">
				<div class="panel panel-default panel-top" id="blocks-tx">
				    <div class="panel-body">
			     	   <ul class="nav nav-tabs" style="height:42px">
							<li class="active" data-val="blockhour"><a href="#">区块 / 时</a></li>
							<li data-val="blockmin"><a href="#">区块 / 分</a></li>
							<li data-val="tranhour"><a href="#">交易 / 时</a></li>
							<li data-val="tranmin"><a href="#">交易 / 分</a></li>
						</ul>
						<div id="blocktxchart" class="clear" style="width:100%;"></div>
				    </div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-1"></div>
			<div class="col-md-5">
				<div class="panel panel-default panel-bottom">
					<div style="width:1px;height:100%;border:1px solid rgb(165, 169, 168);float:left;position:relative;left:27px;"></div>
				    <div class="panel-body">
				    	<div id="blockdetail" style="overflow:auto;padding-left:40px;">
				    		<div class="panel panel-default" style="width:65%" v-for="block in blockList">
				    			<div class="panel-heading detailhead">
				    				<span class="glyphicon glyphicon-book" aria-hidden="true" style="position:relative;right:50px;"></span>
				    				<strong style="color:white;">区块{{block.blockNumber}}</strong>
				    				<span class="glyphicon glyphicon-book" aria-hidden="true" style="float:right"></span>
							    </div>
							    <div class="panel-body">
							    	<strong>Datahash:</strong>
							    	<div>{{block.blockData}}</div>
							    	<p><strong>Number of Tx: {{block.numberOfTx}}</strong></p>
							    	<span class="label label-default" style="margin-top:5px">{{block.timediff}}</span>
							    </div>
							</div>
							
<!-- 							<div class="panel panel-default" style="width:65%"> -->
<!-- 				    			<div class="panel-heading detailhead"> -->
<!-- 				    				<span class="glyphicon glyphicon-book" aria-hidden="true" style="position:relative;right:50px;"></span> -->
<!-- 				    				<strong style="color:white;">åºå3</strong> -->
<!-- 				    				<span class="glyphicon glyphicon-book" aria-hidden="true" style="float:right"></span> -->
<!-- 							    </div> -->
<!-- 							    <div class="panel-body"> -->
<!-- 							    	<strong>Datahash:</strong> -->
<!-- 							    	<div>123jasdajd1u203nsdahdjhasdh1002e91hasdasfdfasdajsdjadndasdasdajd1h2e192h91dsadsa</div> -->
<!-- 							    	<p><strong>Number of Tx: 1</strong></p> -->
<!-- 							    	<span class="label label-default" style="margin-top:5px">8åéå</span> -->
<!-- 							    </div> -->
<!-- 							</div> -->
							
<!-- 							<div class="panel panel-default" style="width:65%"> -->
<!-- 				    			<div class="panel-heading detailhead"> -->
<!-- 				    				<span class="glyphicon glyphicon-book" aria-hidden="true" style="position:relative;right:50px;"></span> -->
<!-- 				    				<strong style="color:white;">åºå2</strong> -->
<!-- 				    				<span class="glyphicon glyphicon-book" aria-hidden="true" style="float:right"></span> -->
<!-- 							    </div> -->
<!-- 							    <div class="panel-body"> -->
<!-- 							    	<strong>Datahash:</strong> -->
<!-- 							    	<div>123jasdajd1u203nsdahdjhasdh1002e91hasdasfdfasdajsdjadndasdasdajd1h2e192h91dsadsa</div> -->
<!-- 							    	<p><strong>Number of Tx: 1</strong></p> -->
<!-- 							    	<span class="label label-default" style="margin-top:5px">8åéå</span> -->
<!-- 							    </div> -->
<!-- 							</div> -->
				    	</div>
				    </div>
				</div>
			</div>
			<div class="col-md-5">
				<div class="panel panel-default panel-bottom">
					<div class="panel-heading" style="height:42px;">
				           组织交易
				    </div>
				    <div class="panel-body">
				    	<div id="orgchart" style="width:100%"></div>
				    </div>
				</div>
			</div>
		</div>
	</div>
	<script th:src="@{plugins/eCharts/echarts.min.js}"></script>
	<script th:src="@{js/jquery-1.11.3.min.js}"></script>
	<script th:src="@{plugins/bootstrap/js/bootstrap.min.js}"></script>
	<script th:src="@{js/vue.min.js}"></script>
	<script th:src="@{js/lodash.min.js}"></script>
	<script th:src="@{plugins/layer/layer.js}"></script>
	<script th:src="@{js/Loadwebsign.js}"></script>
	<script th:src="@{js/common.js}"></script>
	<script th:src="@{js/home.js}"></script>
</body>
</html>